<!doctype html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<title>sulfurous</title>
<link rel=icon href="../img/favicon.ico">
<link rel=stylesheet href=../css/app.css>
<div class=player></div>
<div class=splash>
<div>
  <h1>sulfurous</h1>
  <div class=progress><div class=progress-bar></div></div>
	<p id='fullscreenWarning'></p>
</div>
</div>
<div class=error>
<div>
  <h1>sulfurous</h1>
  <p>An error has occurred. <a id=bug-link href=https://github.com/mittagskogel/sulfurous/issues/new>Click here</a> to file a bug report on GitHub.</p>
</div>
</div>
<div class=webgl-error>
<div>
  <h1>sulfurous</h1>
  <p>It looks like your device doesn't support WebGL. You can try viewing this project in the legacy player <a id=legacy-link href=https://sulfurous.aau.at/legacy>here</a>.</p>
</div>
</div>
<script src=../js/fonts.js></script>
<script src=//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js></script>
<script src=../js/gl-matrix-min.js></script>
<script src=../js/phosphorus.js></script>
<script src=../js/shaders.js></script>
<script src=../fonts/fonts.js></script>
<script>

(function () {
  'use strict';
  
	/*
  if (location.protocol === 'https:') {
    location.replace(('' + location).replace(/^https:/, 'https:'));
  }
	*/

  var stage;

  var projectId = 17088932;
  var projectTitle = '';
  var turbo = false;
  var fullScreen = true;
  var aspectX = 4;
  var aspectY = 3;
  var resolutionX = 480;
  var resolutionY = 360;

  var params = location.search.substr(1).split('&');
  params.forEach(function(p) {
    var parts = p.split('=');
    if (parts.length > 1) {
      switch (parts[0]) {
        case 'id':
          projectId = Number(parts[1]);
          break;
        case 'turbo':
          turbo = parts[1] !== 'false';
          break;
        case 'full-screen':
          fullScreen = parts[1] !== 'false';
          break;
		case 'aspect-x':
		  aspectX = Number(parts[1]);
		  break;
		case 'aspect-y':
		  aspectY = Number(parts[1]);
		  break;
        case 'resolution-x':
          resolutionX = Number(parts[1]);
          break;
		case 'resolution-y':
		  resolutionY = Number(parts[1]);
		  break;
        default:
          console.log('Skipping unknown option: ' + parts[0] + '=' + parts[1]);
      }
    }
  });
  
  P.resolution = resolutionX;

  var splash = document.querySelector('.splash');
  var progressBar = document.querySelector('.progress-bar');
  var error = document.querySelector('.error');
  var bugLink = document.querySelector('#bug-link');
  var webGLError = document.querySelector('.webgl-error');
  var legacyLink = document.querySelector('#legacy-link');
  var player = document.querySelector('.player');

  var stage;

  function layout() {
    if (!stage) return;
    var w = Math.min(window.innerWidth, window.innerHeight * aspectX / aspectY);
    if (!fullScreen) w = resolutionX;
    var h = w * aspectY / aspectX;
	if (!fullScreen) h = resolutionY;
    player.style.left = (window.innerWidth - w) / 2 + 'px';
    player.style.top = (window.innerHeight - h) / 2 + 'px';
    stage.setZoom(w / 480, h / 360);
    stage.draw();
  }	

	function mobileFullScreen(e){
	  if(e) e.preventDefault();
	  document.documentElement.classList.toggle('fs');
		
		if(!e){
			var el = document.documentElement;
			if (el.requestFullScreenWithKeys) {
				el.requestFullScreenWithKeys();
			} else if (el.webkitRequestFullScreen) {
				el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
			} else if (el.mozRequestFullScreen){
				el.mozRequestFullScreen();
			}	else{
			  console.warn('No full screen available.');
			}
		}
		updateFullScreen();
	}
	
	function updateFullScreen() {
    if (!stage) return;
		
		  resolutionX = !resolutionX ? 480 : resolutionX;
			resolutionY = !resolutionY ? 360 : resolutionY;
		
      window.scrollTo(0, 0);
      var padding = 8;
      var w = window.innerWidth - padding * 2;
      var h = window.innerHeight - padding;
      w = Math.min(w, h * resolutionX / resolutionY);
      h = w * resolutionY / resolutionX;
      document.body.style.width = w + 'px';
      document.body.style.height = h + 'px';
      document.body.style.marginLeft = (window.innerWidth - w) / 2 + 'px';
      document.body.style.marginTop =  (window.innerHeight - h + padding) / 2 + 'px';
      stage.setZoom(w / 480, w * resolutionY / resolutionX / 360);
  }
	
	
	if(P.hasTouchEvents){
	  window.addEventListener('load', function() {
		  document.getElementById('fullscreenWarning').textContent = 'On mobile browsers, use two finger tap in portrait orientation and turn to landscape orientation for full screen.';
		});
	
		document.addEventListener('touchstart', function(e) {
	 	if(e.targetTouches.length >= 2)
	    mobileFullScreen(e);
	  });
	}

  function showError(e) {
    error.style.display = 'table';
    bugLink.href = 'https://github.com/mittagskogel/sulfurous/issues/new?title=' + encodeURIComponent(projectTitle || '') + '&body=' + encodeURIComponent('\n\n\nhttps://scratch.mit.edu/projects/' + projectId + '\nhttps://newton.nes.aau.at/~sulfurous/#' + projectId + (e.stack ? '\n\n```\n' + e.stack + '\n```' : ''));
    console.error(e.stack);
  }

  function showWebGLError(e) {
    webGLError.style.display = 'table';
    legacyLink.href = location;
    legacyLink.href = legacyLink.href.replace('html', 'legacy/html');
    console.error(e);    
  }
  
  window.addEventListener('resize', layout);

  if (P.hasTouchEvents) {
    document.addEventListener('touchmove', function(e) {
      e.preventDefault();
    });
  }

  var request = P.IO.loadScratchr2Project(projectId);

  request.onload = function (s) {
    splash.style.display = 'none';

    stage = s;
    layout();

    s.isTurbo = turbo;
    s.start();
    s.triggerGreenFlag();

    player.appendChild(s.root);
    s.focus();
    s.handleError = showError;
  };
  request.onerror = showError;
  request.onprogress = function (e) {
    progressBar.style.width = (10 + e.loaded / e.total * 90) + '%';
  };

  P.IO.loadScratchr2ProjectTitle(projectId, function(title) {
    document.title = projectTitle = title;
  });
  
  P.showWebGLError = showWebGLError;
  
}());

</script>